<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03 - 基于MVVM模式-VueJs如何将数据渲染方式【理解】</title>
</head>
<body>

<!--2:然后定义渲染的dom view-->
<div id="app">
    <!--// 5: 利用vuejs把数据通过指令和插值表达式完成数据的渲染--->
    <ul v-for="(user,index) in users">
        <li v-for="(key,value) in user">
            {{key}}:{{value}}
        </li>
    </ul>
</div>

<!--1: 先引入 vuejs-->
<!--<script src="js/vue.js"></script>-->
<script src="js/vuejs-2.5.16.js"></script>
<script>
    // 1: 先引入 vuejs
    // 2: 然后定义渲染的dom
    // 3：初始化vuejs的实例对象
    //初始化在这里
    // 4: 准备数据 model
    var userData = [{
        id: 1,
        username: "徐柯老师",
        age: 33,
        male: 1,
        address: "广州广东",
        tel: "15074816437"
    },{
        id: 2,
        username: "张三老师",
        age: 28,
        male: 1,
        address: "广州广东",
        tel: "18923442345"
    },{
        id: 2,
        username: "女神老师",
        age: 12,
        male: 0,
        address: "广州广东",
        tel: "17074816437"
    }];


    // vm---model-view进行数据渲染。
    var app = new Vue({
        el:"#app",
        data:{users:userData}
    });


</script>

</body>
</html>